<!--
 * @Description:第三十五章（event loop 和 nextTick）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-22 19:38:38
-->

<template>

<div>
  <h1>第三十五章（event loop 和 nextTick）</h1>
  <div>
    <h2>event loop</h2>
    <div>
      <p>输出内容查看内容查看</p>
      <img src="./1.png" />
    </div>
  </div>
</div>

</template>
<script setup lang="ts">

  async function Prom() {
    // 第一个console属于同步任务
    console.log('总体顺序1 ====> Prom 我是同步任务，我先输出，输出顺序1')
    // await 也属于微任务
    await Promise.resolve()
    // 下面的console相当于写在了Promise .then里面
    console.log('总体顺序2 ====> Prom await Promise.resolve() 之后console 输出顺序7')
  }

  // 计时器属于宏任务
  setTimeout(() => {
    console.log('总体顺序3 ====> setTimeout1 时间0 输出顺序8')
    Promise.resolve().then(() => {
      console.log('总体顺序4 ====> setTimeout1 时间0 Promise.resolve().then  输出顺序9')

    })
  }, 0)

  // 计时器属于宏任务
  setTimeout(() => {
    console.log('总体顺序5 ====> setTimeout2 时间0 输出顺序10')
    Promise.resolve().then(() => {
      console.log('总体顺序6 ====> setTimeout2 时间0 Promise.resolve().then 输出顺序11')

    })
  }, 0)

  // Promise属于微任务
  Promise.resolve().then(() => {
    console.log('总体顺序7 ====> Promise.resolve().then 输出顺序3')
  })

  Promise.resolve().then(() => {
    console.log('总体顺序8 ====> Promise.resolve().then 输出顺序4')
  })

  Promise.resolve().then(() => {
    console.log('总体顺序9 ====> Promise.resolve().then 输出顺序5')
  })

  Promise.resolve().then(() => {
    console.log('总体顺序10 ====> Promise.resolve().then 输出顺序6')
  })

  Prom()
  // 这个console.log 是同步任务
  console.log('总体顺序11 ====> 执行Prom()后 我是同步任务，我先输出，输出顺序2')

</script>
<style scoped>

</style>
